<template>
  <div class="home">
    <div class="formbox">
      <div class="left">
        <div>
          <div class="img">
            <img src="@/assets/img/s5cbfcff8dc0f0.png" alt="" />
          </div>
        </div>
      </div>
      <div class="right">
        <h1>管理员登录</h1>
        <div class="form">
          <el-form :model="form" :rules="rules" ref="ruleForm">
            <el-form-item label="" prop="uname">
              <el-input
                suffix-icon="el-icon-user"
                v-model="form.uname"
                placeholder="请输入用户名"
                maxlength="8"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="upwd">
              <el-input
                show-password
                v-model="form.upwd"
                placeholder="请输入密码"
                maxlength="12"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="ucode">
              <el-row type="flex" justify="space-between">
                <el-col :span="14">
                  <el-input
                    v-model="form.ucode"
                    placeholder="请输入验证码"
                    maxlength="4"
                    clearable
                  ></el-input
                ></el-col>
                <el-col :span="9"
                  ><span ref="svg" @click="relunch"></span></el-col
                >
              </el-row>
            </el-form-item>
          </el-form>
          <div class="btnbox">
            <el-button
              type="primary"
              class="btn"
              @click="submitForm('ruleForm')"
              v-loading.fullscreen.lock="fullscreenLoading"
              >登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading, Message } from "element-ui";
export default {
  data() {
    return {
      fullscreenLoading: false,
      form: {
        uname: "",
        upwd: "",
        ucode: "",
      },
      timer: null,
      rules: {
        uname: [
          { required: true, message: "请输入用户名名称", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
        upwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        ucode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, max: 4, message: "长度在 4 个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.gettoken();
  },
  methods: {
    relunch() {
      if (this.timer) return;
      this.timer = setTimeout(() => {
        this.timer = null;
      }, 1000);
      this.gettoken();
    },
    submitForm(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          let config = {
            headers: { authorization: localStorage.getItem("token") },
          };
          this.axios
            .get(
              `http://localhost:3000/login?uname=${this.form.uname}&upwd=${
                this.form.upwd
              }&ucode=${this.form.ucode.toLowerCase()}`,
              config
            )
            .then((res) => {
              let { code } = res.data;
              if (code == 200) {
                Message.success("登录成功");
                this.getcode();
                this.clear();
                this.$router.push("/managementSystem");
                this.fullscreenLoading = false;
              } else if (code == 201) {
                Message.error("用户名或密码错误");
                this.getcode();
                this.clear();
                this.fullscreenLoading = false;
              } else if (code == 202) {
                Message.error("验证码错误");
                this.getcode();
                this.clear();
                this.fullscreenLoading = false;
              }
            });
        }
      });
    },
    //清空文本
    clear() {
      this.form.uname = "";
      this.form.upwd = "";
      this.form.ucode = "";
    },
    // 获取token
    gettoken() {
      this.axios.get("http://localhost:3000/gettoken").then((result) => {
        const { data } = result;
        localStorage.setItem("token", data);
        this.getcode();
      });
    },
    //获取验证码 svg 图片
    getcode() {
      let config = {
        headers: { authorization: localStorage.getItem("token") },
      };
      this.axios.get("http://localhost:3000/getcode", config).then((result) => {
        // console.log(result);
        let { data } = result.data;
        this.$refs.svg.innerHTML = data;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
span {
  box-sizing: border-box;
  width: 150px;
  height: 40px;
  border: 1px solid #333;
}
.btnbox {
  display: flex;
  justify-content: start;
}
.btn {
  width: 180px;
}
h1 {
  margin: 0;
}
.form {
  margin-top: 30px;
}
.img {
  width: 100%;
  padding-top: 50px;
}
.right {
  padding: 50px;
  width: 560px;
  height: 100%;
}
.left {
  & > div {
    width: 260px;
    height: 100%;
    background-image: url(../assets/img/dzbsy4-1.jpg);
  }
}
.formbox {
  box-sizing: border-box;
  background-color: #fff;
  width: 760px;
  height: 450px;
  display: flex;
  justify-content: space-between;
}
.home {
  user-select: none;
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/img/s5cbfcdf574724.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
span {
  display: block;
  background-color: #ddd;
}
</style>
